import less from '../less/index.less'
import api from './api'
import marked from 'marked'

let time = null;

new Vue({
    el: '#app',
    data: {
        isShowUserInfo: false,

        textHeight: 450,

        wwwUrl: "",

        arContent: "",

        arToHtml: "",

        isShowTip:false,

        tipStatus:"none"
    },
    watch: {
        arContent: function (newCon, oldCon) {
            this.arToHtml = marked(newCon)
        }
    },
    filters: {
        encodeWwwUrl(value) {
            return encodeURIComponent(value)
        }
    },
    methods: {
        closeGlobalTip(){
            this.isShowTip = false
            window.localStorage.setItem("isTip",0)
        },
        searchAr(e) {
            let keyword = this.$refs.searchInput.value
            window.location.href = `/search?q=${keyword}&p=1`
        },
        switchUserInfo() {
            this.isShowUserInfo = !this.isShowUserInfo
        },
        closeUserInfo() {
            this.isShowUserInfo = false
        },
        async bigNice(aid) {

            let params = {
                aid: aid
            }

            api.post("/iLike", params).then(function ({
                data
            }) {

                if (data.code == 200) {
                    console.log("i like it")
                } else if (data.code == -2) {
                    window.location.href = "/login";
                }

            })
        },
        goTo(e) {
            console.log(e);
            console.log(e.target);
            // window.location.href = "/detail/${id}"
        },
        changeContent(e) {

            clearTimeout(time)

            time = setTimeout(function () {
                document.getElementById("preArContent").innerHTML = marked(document.getElementById("arContent").value);
            }, 20)

        },
        //文章列表生成nav
        createNavList() {
            let h2 = document.getElementById("mainContent").getElementsByTagName("h2");
            let sNav = "";
            for (let i = 0; i < h2.length; i++) {
                sNav += `<a href="#${h2[i].id}">${h2[i].innerHTML}</a>`
            }
            document.getElementById("mainNav").innerHTML = sNav

        },
        // 注册页初始化验证码
        initRegCaptcha(){
             api.get("/captcha").then(function({data}){
                if(document.getElementById("captcha")){
                    document.getElementById("captcha").innerHTML = data
                }
            })
        }
    },


    async mounted() {
        this.initRegCaptcha();
        console.log(11112222)

        //编辑文章页面，设置页面高度
        this.textHeight = window.innerHeight - 95;

        //如果是文章列表页，则创建导航
        if(document.getElementById("mainContent")){
            this.createNavList();
            //滚动设置导航
            window.onscroll = function(){

                if(document.documentElement){

                    if(document.documentElement.scrollTop > 260){
                        document.getElementById("titNav").style = "position:fixed;top:0";
                    }else{
                        document.getElementById("titNav").style = "";
                    }

                }else{
                    alert("不支持IE浏览器，请使用chrome、firefox");
                }

            }
        }
        
        

        let isTip = window.localStorage.getItem("isTip");

        //初始化获取本地存储数据
        if(isTip == 0){
            this.isShowTip = false
            this.tipStatus = "none"
        }else if(isTip == null){
            this.isShowTip = true
            this.tipStatus = "block"
            window.localStorage.setItem("isTip",1)
        }else{
            this.isShowTip = true
            this.tipStatus = "block"
        }

        //滚动同步
        if(this.$refs.arContent){
            this.$refs.arContent.addEventListener('scroll', ()=>{
                let top = this.$refs.arContent.scrollTop
                let height1 = this.$refs.arContent.scrollHeight
                let height2 = this.$refs.preArContent.scrollHeight
                this.$refs.preArContent.scrollTop = Number(top/height1).toFixed(2)*height2
            })
        }        

    },


})